<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - eBusiness</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/slider.js}"></script>
</head>
<body>
    <div th:replace="~{common/header :: header}"></div>

    <div class="slider-container">
        <div class="slides">
            <img th:src="@{/images/1.jpg}" alt="Slide 1" class="slide active">
            <img th:src="@{/images/2.png}" alt="Slide 2" class="slide">
            <img th:src="@{/images/3.png}" alt="Slide 3" class="slide">
        </div>
        <div class="navigation-arrows">
            <span class="prev-arrow">&#10094;</span>
            <span class="next-arrow">&#10095;</span>
        </div>
        <div class="pagination-dots">
            <span class="dot active" data-slide="0"></span>
            <span class="dot" data-slide="1"></span>
            <span class="dot" data-slide="2"></span>
        </div>
    </div>

    <div class="category-search-bar-container">
        <div class="main-nav">
            <ul>
                <li><a th:href="@{/index}">首页</a></li>
                <li th:each="type : ${goodsTypes}"><a th:href="@{/category(typeId=${type.id})}" th:text="${type.typename}"></a></li>
            </ul>
        </div>
        <div class="header-search">
            <form th:action="@{/search}" method="get">
                <input type="text" name="keyword" placeholder="请输入关键词" th:value="${keyword}">
                <button type="submit">搜索</button>
            </form>
        </div>
    </div>

    <div class="main-content">
        <h2>订单详情</h2>
        <p th:if="${error}" style="color: red;" th:text="${error}"></p>

        <div class="order-details-card">
            <h3>订单信息</h3>
            <p>订单编号: <span th:text="${orderBase.id}"></span></p>
            <p>订单金额: ¥<span th:text="${orderBase.amount}"></span></p>
            <p>订单状态: <span id="orderStatus" th:text="${orderBase.status == 0 ? '待支付' : '已完成'}"></span></p>
            <p>下单时间: <span th:text="${#temporals.format(orderBase.orderdate, 'yyyy-MM-dd HH:mm:ss')}"></span></p>

            <h4>商品列表</h4>
            <table class="order-detail-goods-table">
                <thead>
                    <tr>
                        <th>商品编号</th>
                        <th>商品图片</th>
                        <th>商品名称</th>
                        <th>商品购买价</th>
                        <th>购买数量</th>
                        <th>小计</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="item : ${orderItems}">
                        <td th:text="${item.goods.id}"></td>
                        <td><img th:src="@{/images/{picture}(picture=${item.goods.gpicture})}" alt="商品图片" style="width: 50px; height: 50px;"></td>
                        <td th:text="${item.goods.gname}"></td>
                        <td th:text="${item.goods.grprice}"></td>
                        <td th:text="${item.shoppingNum}"></td>
                        <td th:text="${item.subtotal}"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="order-detail-actions">
            <a th:href="@{/orders}" class="btn btn-secondary">返回我的订单</a>
            <button th:if="${orderBase.status == 0}" id="payButton" class="btn btn-primary">去支付</button>
        </div>
    </div>

    <div th:replace="~{common/footer :: footer}"></div>

    <script th:inline="javascript">
        $(document).ready(function() {
            const payButton = $('#payButton');
            const orderId = /*[[${orderBase.id}]]*/ null;
            const orderStatusSpan = $('#orderStatus');

            if (payButton.length > 0) { // Ensure button exists before attaching handler
                payButton.on('click', function() {
                    if (confirm('确定要支付此订单吗？')) {
                        $.ajax({
                            url: '/order/pay/' + orderId,
                            type: 'POST',
                            success: function(response) {
                                if (response.success) {
                                    alert(response.message);
                                    orderStatusSpan.text('已完成'); // Update status text
                                    payButton.hide(); // Hide the button
                                } else {
                                    alert('支付失败: ' + response.message);
                                }
                            },
                            error: function() {
                                alert('支付请求失败，请稍后再试。');
                            }
                        });
                    }
                });
            }
        });
    </script>
</body>
</html> 